 import React,{Component} from 'react'
 import ReactDOM from 'react-dom'
 import Wrapper from '../wrapper'
 class Forgot extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            exist:false
        }
    }
    contentChangeHandle(event){
        var content = event.target.value,
            reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(content.length==0||!reg.test(content)){
            this.setState({
                exist: false
            })
        }else{
             this.setState({
                exist: true
            })
        }
    }
    render() {
        var exist = this.state.exist,
            contentChangeHandle = this.contentChangeHandle.bind(this);
        console.log(exist);
        return (
            
            <div>
                <div className="row">
                    <div className="col-xs-4 col-xs-offset-4 text-center margin-top1">
                        <div className="img-div">
                            <img className="img" src="../dist/images/parllay-icon.png"/>
                        </div>
                        <h1 className="margin0 title">重置密码</h1>
                        <div className="margin-bottom1">
                            <span >请输入电子邮件地址你想发给你的密码重置信息</span>
                        </div>
                    </div>
                    <div className="col-xs-4 col-xs-offset-4 text-center">
                        <form className="" action ="/login/forgot/success"> 
                            <div className="form-group">
                                <div className="text-left text-1">
                                    <p className="">邮箱地址</p>
                                    <input onChange={contentChangeHandle} type="email" className="col-xs-4 form-control " id="inputEmail"/>
                                </div>
                                <button type="submit" className={exist?'btn col-xs-12 btn-info':'btn col-xs-12 btn-primary'} disabled={exist?'':'disabled'}>重置密码</button>
                                <span>返回到<a href="/login">登录</a></span>
                                
                            </div> 
                        </form>
                      </div>  
                </div>
             </div>
           
        );
    }
};

ReactDOM.render(
    <Forgot />,
    document.getElementById('forgot')
);